(() => {
  //矿山的数量
  let mineNum = 1;
  let hire = 1;
  // 点击不同矿工,出现不同id
  let minerId = 1;
  let ele = {};
  ele.bujinqi_left = $("#bujinqi_left");
  ele.bujinqi_center = $("#bujinqi_center");
  ele.bujinqi_num = $("#bujinqi_num");
  ele.bujinqi_right = $("#bujinqi_right");
  ele.toukuang_tit = $("#toukuang_tit");
  ele.mineClace = $("#mineClace");
  ele.modal_tips = $("#modal-tips");
  ele.modal_hire = $("#modal-hire");
  ele.hireClace = $("#hireClace");
  ele.hire_left = $("#hire_left");
  ele.hire_center = $("#hire_center");
  ele.hire_right = $("#hire_right");
  ele.bgtop_right = $("#bgtop_right");
  ele.wanfajieshao = $("#wanfajieshao");
  ele.wangqijilu = $("#wangqijilu");
  ele.bgtop_left = $("#bgtop_left");
  ele.paihangbang = $("#paihangbang");
  ele.tipsimg = $("#tipsimg");
  ele.btn_hire = $("#btn_hire");
  ele.touru_kunag = $("#touru_kunag");
  ele.mountain = $("#mountain");
  ele.body_jackpot = $("#body_jackpot");
  ele.introduce = $("#introduce");
  ele.touru_num = $("#touru_num");
  ele.minerMonry = $("#minerMonry");
  ele.porp_num = $("#porp_num");
  ele.countdown = $("#countdown");
  ele.pinmi = $("#pinmi");
  ele.top_img = $("#top_img");
  ele.zhifu = $("#zhifu");
  ele.my_money = $("#my_money");
  ele.popr_nums = $("#popr_nums");
  window.onload = () => {
    // 首页数据渲染
    initList();
  };
  ele.hire_center.value = hire;
  ele.bujinqi_center.value = mineNum;
  // 矿山点击减
  ele.bujinqi_left.onclick = () => {
    if (mineNum == 1) return;
    mineNum--;
    ele.bujinqi_center.value = mineNum;
    ele.bujinqi_num.innerHTML = mineNum + "矿工";
  };
  // 点击返回
  ele.top_img.onclick = () => {
    history.back();
  };
  // 矿山点击加
  ele.bujinqi_right.onclick = () => {
    mineNum++;
    ele.bujinqi_center.value = mineNum;
    ele.bujinqi_num.innerHTML = mineNum + "矿工";
  };
  // 点击排行榜
  ele.paihangbang.onclick = () => {
    location.href = "../page/divide_rankings.html";
  };
  // 点击雇佣工人减
  ele.hire_left.onclick = () => {
    if (hire == 1) return;
    hire--;
    ele.hire_center.value = hire;
    ele.zhifu.innerHTML = (hire * 1.05).toFixed(2);
  };
  // 点击雇佣工人加
  ele.hire_right.onclick = () => {
    hire++;
    ele.hire_center.value = hire;
    ele.zhifu.innerHTML = (hire * 1.05).toFixed(2);
  };
  // !当雇佣工人输入框变化时
  ele.hire_center.oninput = (e) => {
    if (e.target.value <= 0) return;
    hire = e.target.value;
    ele.zhifu.innerHTML = (hire * 1.05).toFixed(2);
  };
  // !当输入框变化时
  ele.bujinqi_center.oninput = (e) => {
    if (e.target.value <= 0) return;
    if (e.target.value.replace(/[^0-9]/g, "")) {
      mineNum = e.target.value;
      ele.bujinqi_num.innerHTML = mineNum + "矿工";
    }
  };
  // 点击记录
  ele.bgtop_left.onclick = () => {
    location.href = "../page/participation.html";
  };
  // 点击往期记录
  ele.wangqijilu.onclick = () => {
    location.href = "../page/previous_records.html";
  };

  //! 关闭矿山
  ele.mineClace.onclick = () => {
    closeMdl(ele.modal_tips);
    mineNum = 1;
    ele.bujinqi_center.value = mineNum;
    ele.bujinqi_num.innerHTML = mineNum + "矿工";
  };
  //! 关闭雇佣工人
  ele.hireClace.onclick = () => {
    closeMdl(ele.modal_hire);
    hire = 1;
    if (e.target.value.replace(/[^0-9]/g, "")) {
      ele.hire_center.value = hire;
      ele.zhifu.innerHTML = "1.05";
    }
  };

  // 点击雇佣打开步进器
  ele.bgtop_right.onclick = () => {
    openMdl(ele.modal_hire);
  };
  // 点击玩法介绍跳转
  ele.wanfajieshao.onclick = () => {
    location.href = "../page/gameplay.html";
  };

  // 点击雇佣矿工发请求
  ele.btn_hire.onclick = () => {
    btn_hire();
  };
  // 点击投入矿工
  ele.touru_kunag.onclick = () => {
    miner_kuang();
  };

  function miner_kuang() {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.MINER,
      header: {
        // 'phoenix-token': token,
        // 'phoenix-id': userid,
        Authorization: token,
      },
      data: {
        num: mineNum,
        id: minerId,
      },
      success: (res) => {
        // 在调用一次数据初始化
        ele.bujinqi_num.innerHTML = "1";
        ele.bujinqi_center.value = "1";
        mineNum = 1;
        initList();
        openTips(res.msg);
        closeMdl(ele.modal_tips);
        if (res.code != 1) {
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  function btn_hire() {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.HIRE,
      header: {
        // 'phoenix-token': token,
        // 'phoenix-id': userid,
        Authorization: token,
      },
      data: {
        num: hire,
      },
      success: (res) => {
        ele.hire_center.value = 1;
        ele.zhifu.innerHTML = "1.05";
        hire = 1;
        // 在调用一次数据初始化
        initList();
        openTips(res.msg);
        closeMdl(ele.modal_hire);
        // if (res.code != 1) {
        // }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }

  // 首页数据
  function initList() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.MINERLIST,
      header: {
        // 'phoenix-token': token,
        // 'phoenix-id': userid,
        Authorization: token,
      },
      success: (res) => {
        // 调用函数渲染页面
        initRendering(res.data);
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  function bujinqi() {
    ele.top_left_img = $("#top_left_img");
    ele.top_right_img = $("#top_right_img");
    ele.center_img = $("#center_img");
    ele.bot_left_img = $("#bot_left_img");
    ele.bot_right_img = $("#bot_right_img");
    // 点击1号矿山弹出投如人数
    ele.top_left_img.onclick = () => {
      minerId = 1;
      ele.toukuang_tit.innerHTML = "一号矿山";
      // 切换背景
      ele.tipsimg.innerHTML = `
      <img  src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-green.png" alt="" />
      <div class="toukuang_title"><p>当前面积:${ele.top_left_img.dataset.num}平米</p></div>`;
      openMdl(ele.modal_tips);
    };
    // 点击2号矿山弹出投如人数
    ele.top_right_img.onclick = () => {
      minerId = 2;
      ele.toukuang_tit.innerHTML = "二号矿山";
      // 切换背景
      ele.tipsimg.innerHTML = `
          <img  src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-blue.png" alt="" />
          <div class="toukuang_title"><p>当前面积:${ele.top_right_img.dataset.num}平米</p></div>`;
      openMdl(ele.modal_tips);
    };
    // 点击3号矿山弹出投如人数
    ele.center_img.onclick = () => {
      minerId = 3;
      ele.toukuang_tit.innerHTML = "三号矿山";
      // 切换背景
      ele.tipsimg.innerHTML = `
         <img  src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-purple.png" alt="" />
         <div class="toukuang_title"><p>当前面积:${ele.center_img.dataset.num}平米</p></div>`;
      openMdl(ele.modal_tips);
    };
    // 点击4号矿山弹出投如人数
    ele.bot_left_img.onclick = () => {
      minerId = 4;
      ele.toukuang_tit.innerHTML = "四号矿山";
      // 切换背景
      ele.tipsimg.innerHTML = `
         <img  src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-red.png" alt="" />
         <div class="toukuang_title"><p>当前面积:${ele.bot_left_img.dataset.num}平米</p></div>`;
      openMdl(ele.modal_tips);
    };
    // 点击5号矿山弹出投如人数
    ele.bot_right_img.onclick = () => {
      minerId = 5;
      ele.toukuang_tit.innerHTML = "五号矿山";
      // 切换背景
      ele.tipsimg.innerHTML = `
         <img  src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-orange.png" alt="" />
         <div class="toukuang_title"><p>当前面积:${ele.bot_right_img.dataset.num}平米</p></div>`;
      openMdl(ele.modal_tips);
    };
  }

  // 生成渲染页面的函数
  function initRendering(obj) {
    // 我的本期投入
    // !金币
    ele.my_money.innerHTML = obj.detail.gold;
    ele.touru_num.innerHTML = obj.detail.use_miner;
    ele.minerMonry.innerHTML = obj.detail.my_money;
    // 总数
    ele.porp_num.innerHTML = obj.detail.my_miner;
    ele.popr_nums.innerHTML = obj.detail.my_miner;

    // 倒计时效果
    ele.countdown.innerHTML = getCountTime(obj.detail.over_load);
    let dingshhi = setInterval(() => {
      if (obj.detail.over_load <= 0) {
        clearInterval(dingshhi);
      }
      ele.countdown.innerHTML = getCountTime(obj.detail.over_load);
    }, 1000);
    ele.mountain.innerHTML = `
    <div class="top_left">
    <div class="t_left">
      <img
      data-num="${obj.list["1"] ? obj.list["1"].num : "0"}"
        id="top_left_img"
        src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-green.png"
        alt=""
      />
      <div class="addess"><p>${
        obj.list["1"] ? obj.list["1"].num : "0"
      }平米</p></div>
      <!-- 这个是消息提示 -->
      <div class="hua" data-id="1" id="one_">
      
      </div>
    </div>
  </div>
  <div class="top_right">
    <div class="t_left">
      <img
       data-num="${obj.list["2"] ? obj.list["2"].num : "0"}"
        id="top_right_img"
        src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-blue.png"
        alt=""
      />
      <div class="addess"><p>${
        obj.list["2"] ? obj.list["2"].num : "0"
      }平米</p></div>
      <!-- 这个是消息提示 -->
      <div class="hua" data-id="2" id="one_">
       
      </div>
    </div>
  </div>
  <div class="center">
    <div class="t_left">
      <img
      data-num="${obj.list["3"] ? obj.list["3"].num : "0"}"
        id="center_img"
        src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-purple.png"
        alt=""
      />
      <div class="addess"><p>${
        obj.list["3"] ? obj.list["3"].num : "0"
      }平米</p></div>
      <!-- 这个是消息提示 -->
      <div class="hua"  data-id="3" id="one_">
     
      </div>
    </div>
  </div>
  <div class="bot_left">
    <div class="t_left">
      <img
      data-num="${obj.list["4"] ? obj.list["4"].num : "0"}"
        id="bot_left_img"
        src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-red.png"
        alt=""
      />
      <div class="addess"><p>${
        obj.list["4"] ? obj.list["4"].num : "0"
      }平米</p></div>
      <!-- 这个是消息提示 -->
      <div class="hua"  data-id="4" id="one_">
   
      </div>
    </div>
  </div>
  <div class="bot_right">
    <div class="t_left">
      <img
      data-num="${obj.list["5"] ? obj.list["5"].num : "0"}"
        id="bot_right_img"
        src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-orange.png"
        alt=""
      />
      <div class="addess"><p>${
        obj.list["5"] ? obj.list["5"].num : "0"
      }平米</p></div>
      <!-- 这个是消息提示 -->
      <div class="hua"  data-id="5" id="one_">
        <div class="hua_jiang"><p>当前每平米奖励</p></div>
        <img src="http://img.qxgs.cc/tiantianlaishouzu/img/number/jinbi.png" alt="" />
        <span>12.9</span>
      </div>
    </div>
  </div>`;
    // 渲染完模板后获取页面的id绑定投入数量
    bujinqi();
    // 循环下面的山信息
    let messageList = document.querySelectorAll("#one_");
    messageList.forEach((item) => {
      if (item.dataset.id == obj.detail.max.ks_id) {
        item.innerHTML = `
        <div class="hua_jiang"><p>当前每平米奖励</p></div>
        <img src="http://img.qxgs.cc/tiantianlaishouzu/img/number/jinbi.png" alt="" />
        <span>${obj.detail.max.pj_money}</span>`;
      } else if (item.dataset.id == obj.detail.min.ks_id) {
        item.innerHTML = `
        <div class="hua_jiang"><p>当前每平米奖励</p></div>
        <img src="http://img.qxgs.cc/tiantianlaishouzu/img/number/jinbi.png" alt="" />
        <span>${obj.detail.min.pj_money}</span>`;
      } else {
        item.style.display = "none";
      }
    });
    // <!-- 最大奖池与最小奖池 -->
    ele.body_jackpot.innerHTML = `
    <div class="jackpot_left">
    <div class="nei">
      <div class="pos_img">
        <span>最大</span>
        <div id="shan_maximg">
        <img
          src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-orange.png"
          class="nei_img"
          alt=""
        />
        </div>
      </div>
      <div class="nei_right">
        <img src="http://img.qxgs.cc/tiantianlaishouzu/img/number/jinbi.png" class="nei_jinbi" alt="" />
        <span>${obj.detail.max.all_money || 0}</span>
      </div>
    </div>
    <div class="jackpot_tit">当前最大矿山奖池</div>
  </div>
  <div class="jackpot_right">
    <div class="nei">
      <div class="pos_img">
        <span>最小</span>
        <div id="shan_minimg">
        <img
          src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-blue.png"
          class="nei_img"
          alt=""
        />
        </div>
      </div>
      <div class="nei_right">
        <img src="http://img.qxgs.cc/tiantianlaishouzu/img/number/jinbi.png" class="nei_jinbi" alt="" />
        <span>${obj.detail.min.all_money || 0}</span>
      </div>
    </div>
    <div class="jackpot_tit">当前最小矿山奖池</div>
  </div>
    `;
    let img_List = [
      '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-green.png" class="nei_img" />',
      '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-blue.png" class="nei_img" />',
      '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-purple.png" class="nei_img" />',
      '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-red.png" class="nei_img" />',
      '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-orange.png" class="nei_img" />',
    ];
    let shan_maximg = $("#shan_maximg");
    let shan_minimg = $("#shan_minimg");
    // 获取最大和最小的信息
    img_List.forEach((item, index) => {
      if (index + 1 == obj.detail.max.ks_id) {
        shan_maximg.innerHTML = item;
      } else if (index + 1 == obj.detail.min.ks_id) {
        shan_minimg.innerHTML = item;
      }
    });

    // <!-- 下方的山的介绍 -->
    let introduce_List = [
      "http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-green.png",
      "http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-blue.png",
      "http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-purple.png",
      "http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-red.png",
      "http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/314x216-orange.png",
    ];
    let newIntroduce_List = introduce_List
      .map((item, index) => {
        return `  <div class="introduce_box">
      <img
        src="${item}"
        class="introduce_img"
        alt=""
      />
      <div id="pos_tit" data-id="${index + 1}" class="pos_tit"><p>最大</p></div>
      <div class="introduce_name">${
        obj.list[index + 1] ? obj.list[index + 1].record_num : "0"
      }人</div>
    </div>`;
      })
      .join(" ");
    ele.introduce.innerHTML = newIntroduce_List;

    // 获取所有的pos_tit
    let pos_titAll = document.querySelectorAll("#pos_tit");
    pos_titAll.forEach((item, index) => {
      if (item.dataset.id == obj.detail.max.ks_id) {
        // 代表最大
        item.innerHTML = `<p>最大</p>`;
      } else if (item.dataset.id == obj.detail.min.ks_id) {
        item.innerHTML = `<p>最小</p>`;
      } else {
        // 代表没有
        item.style.display = "none";
      }
    });
  }
})();
